```vue:d:\桌面\小程序\app\my-project\src\views\DishDetail.vue
<template>
  <div>
    <h1>{{ dish.name }}</h1>
    <img :src="dish.image" alt="{{ dish.name }}" />
    <p>价格: {{ dish.price }}</p>
    <p>描述: {{ dish.description }}</p>
    <button @click="addToCart">加入购物车</button>
    <button @click="addToFavorites">收藏</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
  name: 'DishDetail',
  setup() {
    const route = useRoute();
    const dish = ref({});

    const fetchDish = async () => {
      try {
        const response = await fetch('/mock/dishes.json');
        const dishes = await response.json();
        dish.value = dishes.find(item => item.id === parseInt(route.params.id));
      } catch (error) {
        console.error('获取菜品数据失败:', error);
      }
    };

    const addToCart = () => {
      // 实现加入购物车逻辑
    };

    const addToFavorites = () => {
      // 实现收藏逻辑
    };

    onMounted(() => {
      fetchDish();
    });

    return {
      dish,
      addToCart,
      addToFavorites
    };
  }
};
</script>
```